<template>
  <div>
    <el-button size="small" @click="adminAddFn"> 添加管理员 </el-button>
  </div>

  <el-table :data="showData" style="width: 100%">
    <el-table-column prop="adminname" label="管理员名字" width="180" />
    <el-table-column prop="role" label="管理员角色" width="180" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form">
      <el-form-item label="管理员用户名" :label-width="formLabelWidth">
        <el-input v-model="form.adminname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="管理员密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" :label-width="formLabelWidth">
        <el-select v-model="form.role" placeholder="请选择角色">
          <el-option label="超级管理员" :value="1" />
          <el-option label="普通管理员" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="adminAddSave()"> 新增 </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- <el-pagination
    :page-size="pageSize"
    v-model:current-page="currentPage"
    layout="prev, pager, next"
    :total="total"
    @change="currentPageChange"
  /> -->

  <el-pagination
    :page-size="pageSize"
    v-model:current-page="currentPage"
    layout="prev, pager, next"
    :total="total"
  />
</template>

<script lang="ts" setup>
import { adminListRequest, adminDeleteRequest, adminAddRequest } from '@/api/user'
import { ref, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const tableData = ref([])
const showTableData = ref([])

//页码
const currentPage = ref(1)
// 一页多少条数据
const pageSize = ref(2)
const total = ref(0)

function loadList() {
  adminListRequest().then((r) => {
    console.log(r.data)
    tableData.value = r.data.data
    //服务器一下返回了所有的列表数据
    total.value = tableData.value.length
    // currentPageChange()
  })
}
loadList()

function currentPageChange() {
  // 监听页码改变-提取数组中对应数据，
  // currentPage 1  -> 0 1
  // currentPage 2  -> 2 3
  // currentPage 3  -> 4 5
  // currentPage 4  -> 6 7

  //   开始位置 (页码-1)*页容量 ， 结束位置 页码*页容量
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  //提取数组中对应数据，
  showTableData.value = tableData.value.slice(startIndex, endIndex)
}

// 前端分页1
//使用计算属性-计算列表要展示id数据
const showData = computed(function () {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  //提取数组中对应数据，
  return tableData.value.slice(startIndex, endIndex)
})

const handleEdit = (index: number, row) => {
  console.log(index, row)
}
const handleDelete = (index: number, row) => {
  console.log(index, row)
  // 调用删除接口--》刷新列表
  adminDeleteRequest(row.adminid).then((r) => {
    loadList()
  })
}

// 管理员的添加
function adminAddFn() {
  //让编辑对话-出现
  dialogFormVisible.value = true
}
async function adminAddSave() {
  //调用管理员添加接口-刷新列表
  const r = await adminAddRequest(form.adminname, form.password, form.role)
  console.log(r.data)
  if (r.data.code == 200) {
    loadList()
    ElMessage({
      message: r.data.message,
      type: 'success',
    })
    dialogFormVisible.value = false
  } else {
    ElMessage({
      message: r.data.message,
      type: 'error',
    })
  }
}

// 对话框表单 （让编辑对话）显示和隐藏
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

// 记录编辑表单的内容
const form = reactive({
  adminname: '',
  password: '',
  role: 1,
})
</script>
